<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>校园交流平台</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <!-- 引入vuejs -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入element组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--模板通用css-->
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <el-container id="app" v-cloak>
        <div th:replace="fragment/common::header"></div>
        <div class="pad"></div>
        <div style="width:80%;margin:0px auto;">
                <el-card class="announce">
                    <div slot="header">
                        <i class="el-icon-data-analysis"></i>
                        <span>校园公告</span>
                        <el-link type="primary" style="float: right;" href="announcelist">更多</el-link>
                    </div>
                    <div v-for="(announce,index) in announces" :key="index" class="item">
                        <div class="antext anindex">{{index+1}}:</div>
                        <a v-if="announce.title!='----'" :href="'announceinfo?id='+announce.id"><div class="antext antitle">&nbsp;&nbsp;{{announce.title}}</div></a>
                        <div v-if="announce.title=='----'" class="antext antitle">&nbsp;&nbsp;{{announce.title}}</div>
                        <div class="antext antime">{{announce.createtime}}</div>
                    </div>
                </el-card>
                <el-card class="calendar">
                        <div slot="header">
                            <i class="el-icon-time"></i>
                            <span>时间</span>
                        </div>
                        <div class="cal">
                            {{callendar}}&nbsp;&nbsp;&nbsp;{{week}}
                        </div>
                        <div class="time">
                            {{time}}
                        </div>
                </el-card>
                <el-card class="topshow" style="float:left;">
                    <div slot="header">
                        <i class="el-icon-medal-1"></i>
                        <span>总分享榜</span>
                    </div>
                    <div v-for="(item,index) in allTop" :key="index" class="item">
                        <div class="antext anindex">{{index+1}}:</div>
                        <a v-if="item.username!='----'" :href="'showuserinfo?name='+item.username"><div class="antext antitle">&nbsp;&nbsp;用户名:{{item.username}}</div></a>
                        <div v-if="item.username=='----'" class="antext antitle">&nbsp;&nbsp;用户名:{{item.username}}</div>
                        <div class="antext antime">文章数:{{item.count}}</div>
                    </div>
                </el-card>
                <el-card class="topshow" style="float:right;">
                        <div slot="header">
                            <i class="el-icon-medal-1"></i>
                            <span>本月分享榜</span>
                        </div>
                        <div v-for="(item,index) in nowMonthTop" :key="index" class="item">
                            <div class="antext anindex">{{index+1}}:</div>
                            <a v-if="item.username!='----'" :href="'showuserinfo?name='+item.username"><div class="antext antitle">&nbsp;&nbsp;用户名:{{item.username}}</div></a>
                            <div v-if="item.username=='----'" class="antext antitle">&nbsp;&nbsp;用户名:{{item.username}}</div>
                            <div class="antext antime">文章数:{{item.count}}</div>
                        </div>
                    </el-card>
            </div>
    </el-container>
    <script th:inline="javascript">
        new Vue({
            el:'#app',
            data(){
                return{
                	activeIndex: '1',
                    userName:'',
                    announces:[],
                    callendar:'',
                    time:'',
                    timer:'',
                    weeks:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
                    week:'',
                    allTop:[],
                    nowMonthTop:[]
                }
            },
            created:function(){
            	this.userName=[[${session.userName}]];
            	this.getTopAnno();
            	//日历
            	this.initcalendar();
                this.timer=setInterval(this.initcalendar,1000);
                //榜单
                this.getAllTop(true);
                this.getAllTop(false);
            },
            beforeDestroy() {
                clearInterval(this.timer);
            },
            methods:{
            	//选择nav选项
            	handleSelect(key, keyPath){
            		switch(key){
                    case '1':
                        window.location.href="index";
                        break;
                    case '2':
                        window.location.href="forum";
                        break;
                    case '3':
                        window.location.href="blog";
                        break;
                    case '4-1':
                        window.location.href="http://www.dl-city.com/";
                        break;
                    case '4-2':
                        window.location.href="http://citytsg.dlut.edu.cn/index.htm";
                        break;
                    case '4-3':
                        window.location.href="http://cityftp.dlut.edu.cn/index.htm";
                        break;
                    case '4-4':
                        window.location.href="http://172.30.2.66/vod/action/indexListAction.do?method=indexShow";
                        break;
                    case '4-5':
                        window.location.href="http://tv.byr.cn/show";
                        break;
                    }
                },
                //日历
              //初始化日历时间
                initcalendar(){
                    var nowDate=new Date();
                    var year=nowDate.getFullYear();
                    var month=nowDate.getMonth()+1;
                    var day=nowDate.getDate();
                    var week=nowDate.getDay();
                    var hour=nowDate.getHours()<10?'0'+nowDate.getHours():nowDate.getHours();
                    var minute=nowDate.getMinutes()<10?'0'+nowDate.getMinutes():nowDate.getMinutes();
                    var second=nowDate.getSeconds()<10?'0'+nowDate.getSeconds():nowDate.getSeconds();
                    this.callendar=year+"年"+month+"月"+day+'日';
                    this.time=hour+':'+minute+':'+second;
                    this.week=this.weeks[week];
                },
                //榜单
                getAllTop(isAll){
                	var _this=this;
                	$.ajax({
                		url:'sharetopfive',
                		type:'GET',
                		data:{
                			isAll:isAll
                		},
                		dataType:'JSON',
                		success:function(data){
                			if(isAll){
                				_this.allTop=data;
                			}else{
                				_this.nowMonthTop=data;
                			}
                		}
                	});
                },
                //公告top5
                getTopAnno(){
                	var _this=this;
                	$.ajax({
                		url:'announcestop',
                		type:'GET',
                		data:{},
                		dataType:'json',
                		success:function(data){
                			_this.announces=data;
                		}
                	});
                }
            }
        })
    </script>
    <style>
        .topshow{
            margin-top: 20px;
            margin-bottom: 20px;
            width: 49%;
        }
        .cal{
            margin-top: 10px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            color: #66b1ff;
            font-size: 33px;
        }
        .time{
            height: 100px;
            line-height: 100px;
            text-align: center;
            color: #66b1ff;
            font-size: 28px;
        }
        .calendar{
            width: 38%;
            height: 325px;
            float: right;
        }
        .antime{
            float: right;
            width: 20%;
            margin-right: 5px;
            font-size: 13px;
            text-align: left;
            color: #909399;
        }
        .anindex{
            float: left;
            width: 2%;
            font-size: 15px;
            color: #303133;
            margin-left: 5px;
        }
        .antitle{
            float: left;
            width: 74%;
            overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
            margin-left: 5px;
            font-size: 14px;
            color: #303133;
        }
        .antitle:hover{
            color: #409EFF;
            text-decoration: underline;
        }
        .antext{
            height: 40px;
            line-height: 40px;
        }
        .item{
            height: 40px;
            margin-bottom: 5px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            
        }
        .announce{
            width: 60%;
            float: left;
        }
    </style>
</body>
</html>